今天要讓網頁在電腦和手機上面都能正常觀看，也就是響應式頁面。
學習網址:https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
注意:這裡我用的是Bootstrap 3的版本，打完3篇後才發現超想哭
總計3篇:
1.https://ithelp.ithome.com.tw/articles/10195551
2.https://ithelp.ithome.com.tw/articles/10195875
3.https://ithelp.ithome.com.tw/articles/10196050

Bootstrap's grid system。分12等分。他會自動根據視窗大小來調整網頁大小。

Grid Classes
有四種類別

• xs (手機用 - 螢幕寬小於768px)
• sm (平板用 - 螢幕寬大於或等於768px)
• md (筆電用 - 螢幕大於等於992px)
• lg (筆電和桌電螢幕 - 比1200px大)
• 這四個類型是向上相容的，使用xs可以同時往上相容，但要客製化的話還是要個別設定。

Basic Structure of a Bootstrap Grid

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

一行需要表達的元素用包起來，class給"row"，這行就能有RWD的效果了。
內部元素的話一樣用class給，基本句型col-(xs/sm/md/lg)-(1~12)
ex: class="col-sm-4" 中間是螢幕類別，後面是他要站幾成(span,12等分)
注意:一行row裡不能超過12個span，不然不會正確顯示。

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Grid System Rules 規則

• Rows必須放在.container (fixed-width)或.container-fluid (full-width)裡，以獲得較佳的排列與分割
• 使用rows來創建一整欄水平的群組
• 內容(ex:<p> <img>....你的網頁內容)必須放在(可以是<div>標籤，class為)columns裡, 所有的(class為)columns的元素必須是rows的子元素
• 使用class像是row和col-sm-4 可以快速的做出 grid layouts(RWD)
• 透過padding，欄(Columns)會產生間隔(欄與欄之間的間隔). That padding is offset in rows for the first and last column via negative margin on .rows(看不懂XD)
• 網格欄(Grid columns)是12等份的。如果你想做出三等份的欄位的話，class用"col-sm-4"
  (反正就是12等份，自行切割)
• 欄的寬度是百分比呈現的，會針對父元素作出能伸縮的排版

引用Bootstrap 3，加在head標籤裡

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

基本結構:
通常用<div>元素作切割，以class給元素作控制(Bootstrap套版模式)

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

製造一個grid view layout(RWD)步驟
1.新建(class為)container (<div class="container">)
2.建立一個 row (<div class="row">)
3.在row裡新建class為col-*-*格式的元素(基本句型col-(xs/sm/md/lg)-(1~12))，12個span為100%，自行調整，注意別超過12會無法正確排版。

Bootstrap標準模式就是套class。不是最基本的CSS操作，想搞懂的話還是要研究。
明天繼續